@use 'angular-material-css-vars' as mat-css-vars;
@use '../_common';
@use './mixins/media-queries';

html,
body,
app-root,
.app-frame {
  overflow: hidden;
  margin: 0;
  /* stylelint-disable-next-line no-duplicate-selectors */
  height: 100%;
  height: -webkit-fill-available;
  box-sizing: border-box;
  font-optical-sizing: auto;
  font-family: var(--font-primary-stack);
}

html {
  overflow: hidden !important;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

  button,
  a {
    -webkit-app-region: no-drag !important;
  }
}

body {
  // to fix older android web view
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;

  &:before {
    display: none;
    transition: 1s opacity;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    opacity: 0;
  }

  &.isLightTheme {
    color: var(--text-color);
    background: var(--bg);

    &:before {
      display: block;
      opacity: 1;
      filter: saturate(0.8);
      background: mat-css-vars.mat-css-color(50, 1);
    }
    &.isDisableBackgroundTint {
      background: var(--bg);
      &:before {
        display: none;
        opacity: 0;
      }
    }
  }

  &.isDarkTheme {
    color: var(--text-color);
    background: var(--bg);

    &:before {
      display: block;
      opacity: 1;
      filter: brightness(0.1);
      background: mat-css-vars.mat-css-color(900, 1);
    }
    &.isDisableBackgroundTint {
      background: var(--bg);
      &:before {
        display: none;
        opacity: 0;
      }
    }
  }

  // also hide material dialogs while import is in progress
  &.isDataImportInProgress {
    .cdk-overlay-container {
      display: none !important;
    }
  }

  &.isObsidianStyleHeader.isElectron {
    border: 1px solid var(--divider-color);
  }
}

.page-wrapper {
  padding: var(--s) var(--s) calc(var(--s) * 9);

  @include media-queries.mq(xs) {
    padding: var(--s) var(--s2) calc(var(--s) * 9);
  }
}

.component-wrapper {
  max-width: var(--component-max-width);
  margin: auto;
}

.task-list-wrapper {
  padding: 0 var(--s) var(--s7);
  // for a little bit of extra space for 800 width
  max-width: calc(var(--component-max-width) - 40px);
  margin: auto;

  @include media-queries.mq(xxs) {
    padding: 0 var(--s) var(--s7);
  }

  @include media-queries.mq(xs) {
    padding: 0 calc(var(--s) * 1.5) var(--s7);
  }

  @include media-queries.mq(sm) {
    padding: 0 var(--s3) var(--s7);
    max-width: var(--component-max-width);
  }

  @include media-queries.mq(lg) {
    padding: 0 var(--s3) var(--s7);
    max-width: calc(var(--component-max-width) + 100px);
  }

  improvement-banner + & {
    padding-top: 0;
  }
}

blockquote {
  border-left: 4px solid rgba(var(--c-accent), 1);
  margin: 20px 0;
  padding: 1px 20px;
}

a[href] {
  color: var(--c-accent);
}

*,
*:after,
*:before {
  box-sizing: border-box;
}

// make images responsive per default
img {
  max-width: 100%;
  height: auto;
  display: block;
}

// scrollbars
* {
  --scrollbar-width: thin;
  --scrollbar-width-legacy: 4px;
  --scrollbar-color-thumb: var(--scrollbar-thumb);
  --scrollbar-color-track: var(--scrollbar-track);

  .isDarkTheme & {
    --scrollbar-color-thumb: var(--scrollbar-thumb);
    --scrollbar-color-track: var(--scrollbar-track);
  }

  /* Modern browsers with `scrollbar-*` support */
  @supports (scrollbar-width: auto) {
    & {
      scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
      scrollbar-width: var(--scrollbar-width);
    }
  }

  /* Legacy browsers with `::-webkit-scrollbar-*` support */
  @supports selector(::-webkit-scrollbar) {
    &::-webkit-scrollbar-thumb {
      background: var(--scrollbar-color-thumb);
    }

    &::-webkit-scrollbar-track {
      background: var(--scrollbar-color-track);
    }

    &::-webkit-scrollbar {
      max-width: var(--scrollbar-width-legacy);
      max-height: var(--scrollbar-width-legacy);
    }
  }
}
